import React, { useState, useEffect } from 'react'
import { useNavigate } from "react-router-dom"
import '../css/Jly_sjydd.css'
import { Rate } from 'antd-mobile'
import { PhoneFill } from 'antd-mobile-icons'
import { useDispatch } from 'react-redux'
import { changeDefaultState } from "../../../redux/slice/DefaultSlice"
export default function Jly_sjydd() {
    const navigate = useNavigate()
    const dispatch = useDispatch()
    useEffect(() => {
        // 设置定时器，10秒后跳转到另一个页面
        const timer = setTimeout(() => {
            dispatch(changeDefaultState(7))
        }, 10000); // 10秒 = 10000毫秒

        // 清理定时器
        return () => clearTimeout(timer);
    }, []);
    return (
        <div className='Jly_sjydd_main animate__animated animate__bounceInUp'>
            <div className='jly_sjydd_top'>
                <div>
                    <h3>司机已到达</h3>
                    <p>请准时前往上车地点</p>
                </div>
                <div>
                    <button onClick={() => { navigate("/Hcy_page5") }}>取消订单</button>
                </div>
            </div>
            <hr />
            <div className='jly_sjydd_bottom'>
                <div className='jly_sjydd_bottom_img'>
                    <img src="" alt="" />
                </div>
                <div className='jly_sjydd_bottom_text'>
                    <h3>粤A·77777</h3>
                    <p>黑色|劳斯莱斯库里南</p>
                    <div style={{ marginTop: '0.2381rem' }}>胡师傅<Rate readOnly value={5} style={{
                        '--star-size': '0.2857rem',
                        '--active-color': 'orangered',
                    }} /><span style={{ color: 'orangered' }}>5.0分</span></div>
                </div>
                <div className='jly_sjydd_bottom_button'>
                    <PhoneFill fontSize={25} color='#fff' />
                </div>
            </div>
        </div>
    )
}
